<template>
	<view class="login-page">
		<view class="flex justify-center align-center">
			<view class="text-center">
				<image class="w-60 h-60 radius-8" src="@/assets/img/logo.png"></image>
				<view class="pt-24 text-20">欢迎登录</view>
			</view>
		</view>
		<view class="px-40 py-20 mt-30">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<!-- <view class="border-bottom mb-18">
					<uni-forms-item name="nickname">
						<view class="flex align-center">
							<view class="w-60">昵称</view>
							<input type="text" v-model="formData.nickname" :inputBorder="false" placeholder="请输入昵称" focus placeholder-class="gray-c" />
						</view>
					</uni-forms-item>
				</view> -->
				<view class="border-bottom mb-18">
					<uni-forms-item name="account">
						<view class="flex align-center">
							<view class="w-60">帐号</view>
							<input type="text" v-model="formData.account" :inputBorder="false" placeholder="请输入帐号" focus placeholder-class="gray-c" />
						</view>
					</uni-forms-item>
				</view>
				<view class="border-bottom mb-18">
					<uni-forms-item name="pwd">
						<view class="flex align-center">
							<view class="w-60">密码</view>
							<input type="password" v-model="formData.pwd" :inputBorder="false" placeholder="请输入密码" placeholder-class="gray-c" />
						</view>
					</uni-forms-item>
				</view>
				<view class=" border-bottom mb-18">
					<uni-forms-item name="verificationCode" class="flex-1">
						<view class="flex justify-between">
							<view class="w-60">验证码</view>
							<input type="text" v-model="formData.verificationCode" :inputBorder="false" placeholder="请输入验证码" placeholder-class="gray-c" class="flex-1" />
							<image :src="verifyImg" @click="getLoginImgCode" class="w-80 h-35" />
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
			<my-button @click="submit(form)" type="primary" shape="circle" :loading="loading" :disabled="loading" class="mt-40">立即登录</my-button>
			<!-- <view class="px-5 pt-10"><user-agreement v-model="checked" /></view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from "@dcloudio/uni-app"
import { accountLogin, getLoginVerifyImg } from "@/api/login"
import { toast, setStorage } from '@/assets/js/utils'
import { useTranslateLangStore } from '@/stores/translateLang';

onMounted(() => {
	getLoginImgCode()
})

let formData = ref({
	nickname: '',
	account: '',
	pwd: '',
	verificationCode: '',
	uuid: '',
	modelType: useTranslateLangStore().targetLang
})
let rules = ref({
	// 对name字段进行必填验证
	nickname: {
		rules: [
			{
				required: true,
				errorMessage: '请输入昵称'
			}
		]
	},
	account: {
		rules: [
			{
				required: true,
				errorMessage: '请输入登录账号'
			},
			{
				minLength: 6,
				maxLength: 32,
				errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
			}
		]
	},
	pwd: {
		rules: [
			{
				required: true,
				errorMessage: '请输入密码'
			},
			{
				minLength: 6,
				maxLength: 32,
				errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
			}
		]
	},
	verificationCode: {
		rules: [
			{
				required: true,
				errorMessage: '请输入验证码'
			}
		]
	}
})

const checked = ref(false)
const loading = ref(false)
let form = ref(null)
const submit = async (form: any) => {
	let valid = await form.validate()
	if(valid) {
		// if(!checked.value) {
		// 	toast('请阅读并勾选协议')
		// 	return
		// }
		loading.value = true
		let [result, err] = await accountLogin({...formData.value})
		loading.value = false
		if(result) {
			toast('登录成功')
			setStorage('token', result)
			uni.redirectTo({
				url: '/pages/index/index'
			})
		}else{
			getLoginImgCode()
		}
	}
}

const verifyImg = ref('')
//获取图片验证码
const getLoginImgCode = async () => {
    let [result, err] = await getLoginVerifyImg()
    if (result) {
        formData.value.uuid = result.uuid
        verifyImg.value = result.base64Captcha
    }
}
</script>

<style lang="scss">
.login-page {
	padding-top: 20%;
}
.uni-forms-item {
	margin: 0px !important;
}
</style>
